<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >商家管理</el-breadcrumb-item>
      <el-breadcrumb-item>商家列表</el-breadcrumb-item>
      <el-breadcrumb-item>新增商家</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 搜索框 -->
    <el-form :inline="true" :model="searchFrom" class="demo-form-inline">
      <el-form-item label="商家名称">
        <el-input v-model="searchFrom.busName" placeholder="请输入商家名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
    </el-form>
    <div v-if="tableData">
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%" align="center">
        <el-table-column align="center" prop="b_img" label="商家图片" width="180">
          <template slot-scope="scope">
            <el-image :src="scope.row.b_img" style="width: 80px; height: 80px" fit="contain"> </el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="b_name" label="商家名称" width="180"> </el-table-column>
        <el-table-column align="center" prop="b_socre" label="商家评分">
          <template slot-scope="scope"> {{ scope.row.b_socre }}分 </template>
        </el-table-column>
        <el-table-column align="center" prop="b_price" label="商家价格">
          <template slot-scope="scope"> {{ scope.row.b_price }}元 </template>
        </el-table-column>
        <el-table-column align="center" prop="b_JS" label="商家面积">
          <template slot-scope="scope"> {{ scope.row.b_JS }}平米 </template>
        </el-table-column>
        <el-table-column align="center" prop="b_city" label="商家地址"> </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-row>
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="$router.push(`/home/business-updata/${scope.row.b_id}`)"
              ></el-button>

              <el-button type="danger" icon="el-icon-delete" circle @click="deleteBusiness(scope.row.b_id)"></el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 20px 0px; text-align: right"
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="pagesize"
        hide-on-single-page
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      total: '',
      page: '',
      pagesize: '',
      searchFrom: {
        busName: '', //商家名称
      },
      tableData: null, //存储表格数据,表格中包含{page,pagesize,result,total}
    };
  },
  methods: {
    // 修改当前页
    handleCurrentChange(val) {
      console.log(val);
      this.axios.get(`/pet-business?page=${val}&pagesize=4`).then(res => {
        console.log('加载商家列表', res);
        this.tableData = res.data.data.result;
   
      });

     
    },
    // 提交搜索按钮时执行
    onSearch() {
      let name = this.searchFrom.busName.trim();
      if (!name) {
        this.loadBusinessList();
      } else {
        this.axios.post('/pet-business/name', `name=${name}`).then(res => {
          console.log('模糊查询请求', res);
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            console.log(this.tableData);
          }
        });
      }
    },

    // 删除事件
    deleteBusiness(b_id) {
      // 弹窗确认
      this.$confirm('是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
      })
        .then(() => {
          this.axios.post('/pet-business/del', `b_id=${b_id}`).then(res => {
            console.log('删除商家', res);
            if (res.data.code == 200) {
              this.loadBusinessList();
            }
          });
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    // 加载商家列表
    loadBusinessList() {
      this.axios.get('/pet-business?page=1&pagesize=4').then(res => {
        console.log('加载商家列表', res);
        this.tableData = res.data.data.result;
        this.page = res.data.data.page;
        this.pagesize = res.data.data.pagesize;
        this.total = res.data.data.total;
      });
    },
  },
  // 页面挂载完成之后执行，加载商家列表
  mounted() {
    this.loadBusinessList();
  },
};
</script>
